<template>
  <PageContainer>
    <view class="container">
      <Tabs v-model="params.isReply" @change="handleRefresh">
        <Header title="答疑管理" :is-box-shadow="false">
          <template>
            <view class="pt-16 px-16">
              <view class="fz-16 default-color font-bold mb-12"><text>关联供需</text></view>
              <view
                class="pa-12 disFlxAC br-8"
                @click="toSupplyDemandDetails"
                style="background-color: #f2f3f5"
              >
                <TImage
                  v-if="routeOptions?.boType === BoTypeEnum.Supply"
                  class="flex-shrink-0 mr-4"
                  src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/gong.png"
                  width="40rpx"
                  height="40rpx"
                />
                <TImage
                  v-else
                  class="flex-shrink-0 mr-4"
                  src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/xu.png"
                  width="40rpx"
                  height="40rpx"
                />
                <text class="fz-14 default-color flex-1 ov-1">{{ routeOptions?.title }}</text>
                <text class="ali-icon fz-16 ml-12" style="color: #969799">&#xe67b;</text>
              </view>

              <TabNav tabBarColor="#2878FF" />
              <RadioTagGroup
                v-model="params.isShow"
                :data="statusTagList"
                @change="handleRefresh"
              />
            </view>
          </template>
        </Header>
        <TabsItem name="全部" :value="void 0"></TabsItem>
        <TabsItem name="待回复" :value="PublicBooleanEnum.NO" :unread="receivedNum"></TabsItem>
        <TabsItem name="已回复" :value="PublicBooleanEnum.YES"></TabsItem>
        <Paglist
          v-model="dataList"
          :is-init-api="false"
          :parame="params"
          @register="register"
          :is-show-loadmore="dataList.length > 1"
          :scroll-top-bottom="200"
        >
          <view class="pa-16">
            <template v-for="(v, i) in dataList" :key="v.id">
              <QuestionItem :item="v" type="received" :show-supply-demand-info="false" />
            </template>
          </view>
        </Paglist>
      </Tabs>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* singleQuestionManage 答疑管理 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import { BoTypeEnum } from '@/enums/businessOpportunitiesEnum';
  import { navigateTo, onLoad } from '@/router';
  import type { SingleQuestionManage } from '@/router/types/modules';
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { provide, reactive, ref } from 'vue';
  import RadioTagGroup, { type TagItem } from '../../components/RadioTagGroup.vue';
  import { PublicBooleanEnum } from '@/enums/publicModuleEnum';
  import type { IQuestionPageListResult } from '@/api/businessOpportunities/type';
  import { getUserBoQuestionRceiveNum, questionReceivePageList } from '@/api/businessOpportunities';
  import QuestionItem from '../components/QuestionItem.vue';
  import { onPageScroll, onShow } from '@dcloudio/uni-app';

  const routeOptions = ref<SingleQuestionManage>();

  const statusTagList = ref<TagItem[]>([
    {
      value: null,
      label: '全部',
    },
    {
      value: PublicBooleanEnum.YES,
      label: '已公开',
    },
    {
      value: PublicBooleanEnum.NO,
      label: '未公开',
    },
  ]);

  const dataList = ref<IQuestionPageListResult[]>([]);
  const params = reactive<{
    isReply?: PublicBooleanEnum;
    isShow: PublicBooleanEnum | null;
    boInfoId: number;
  }>({
    isReply: void 0,
    isShow: statusTagList.value[0].value,
    boInfoId: 0,
  });

  const [register, { refresh }] = useConList();

  provide('api', questionReceivePageList);

  onLoad<'singleQuestionManage'>((op) => {
    params.boInfoId = op.id;
    routeOptions.value = op;
    refresh();
  });

  onShow(() => {
    if (routeOptions.value && dataList.value.length) refresh();
    queryUserBoQuestionRceiveNum();
  });

  function toSupplyDemandDetails() {
    params.boInfoId &&
      navigateTo({ name: 'supplyDemandDetails', options: { id: params.boInfoId } });
  }

  function handleRefresh() {
    refresh();
  }

  onPageScroll(() => {});

  const receivedNum = ref(0);
  const queryUserBoQuestionRceiveNum = async () => {
    receivedNum.value = await getUserBoQuestionRceiveNum(params.boInfoId);
  };
</script>

<style lang="scss" scoped></style>
